<template>
  <el-form :model="loginForm"
           ref="loginForm"
           :rules="rules"
           label-width="0px"
           label-position="left"
           @keydown.enter.native="login"
           class="login-container">
    <h3 class="login_title">登录</h3>
    <el-form-item prop="phoneNumber">
      <el-input type="text" v-model="loginForm.phoneNumber" auto-complete="off" placeholder="手机号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码" show-password>
      </el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 100%;background: #505458;border: none" @click.stop="login">登录
      </el-button>
    </el-form-item>
    <el-form-item>没有账号？
      <el-button type="text" style="color:#1a5b59;font-weight:bold" @click.stop="register">注册</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import api from '@/apis/api';
/*导入验证规则*/
import cookie from '@/util/cookie'
import {homePAge} from "@/router/admin"
import {loginRules} from "../../util/verify/rules";
import {valiDate} from "../../util/verify/valiDate";
export default {
  name:'login',
  data() {
    return {
      rules: loginRules,
      loginForm: {
        phoneNumber: '19840472154',
        password: '123123'
      }
    }
  },
  methods: {
    register(){
      // 向父组件传参，将当前登录组件切换为注册组件
      this.$emit("status",'register')
    },
    async login() {
      const _this = this;
      /* 执行表单验证 */
      const valid = await valiDate(_this,"loginForm")
      if (!valid) return null
      const loginData = {
        'account': _this.loginForm.phoneNumber,
        'password': _this.loginForm.password
      };
      /* 请求登录接口 */
      const loginResult = await api.login(loginData)
      if (loginResult.code === 200){
        await _this.$store.dispatch("login",{token:loginResult.data,identity:1})
        _this.$util.successMessage("登录成功")
        _this.$router.push({path: '/user/'})
      }else{
        _this.$util.errorMessage(loginResult.msg)
      }

    }
  },
}
</script>

